<template>
  <div class="index-root">
    <audio v-show="false" ref='audio' :src="url" controls="controls"></audio>
    <div class="footer-bar">
      <img class="disc" :class="{'disc-play': !pause && !ended}" src="~/assets/imusic.svg" alt="">
      <div class="meta">
        <div class="meta-title">{{ title }}</div>
        <div class="meta-author">{{ artist }}</div>
      </div>
      <div class="text">{{ currentDisplay }}</div>
      <div class="process">
        <div class="process-inner" :style="{'width': `${process}%`}"></div>
        <div class="process-handle"></div>
      </div>
      <div class="text">{{ durationDisplay }}</div>
      <img class="toggle" v-show="pause || ended" @click="toggle" src="~/assets/iplay.svg" alt="">
      <img class="toggle" v-show="!pause && !ended" @click="toggle" src="~/assets/ipause.svg" alt="">
    </div>
  </div>
</template>

<script>
import jsmediatags from 'jsmediatags'

export default {
  props: [ 'url' ],
  data() {
    return {
      currentTime: 0,
      duration: 1,
      timerId: 0,
      pause: true,
      title: '',
      artist: '',
      ended: false,
      ready: false,
    }
  },
  watch: {
    url() {
      this.pause = true;
      this.ended = false;
      this.ready = false;
    }
  },
  components: {

  },
  mounted() {
    const node = this.$refs.audio
    node.addEventListener('loadedmetadata', () => {
      this.duration = node.duration
      this.ready = true;
      this.$emit('ready')

      this.timerId = setInterval(() => {
        this.currentTime = node.currentTime
        this.ended = node.ended
      }, 200)
    })

    const that = this
    // new jsmediatags.Reader(`${location.origin}/1.mp3`)
    //   .read({
    //     onSuccess: (res) => {
    //       // console.log(res);
    //       that.title = res.tags.title
    //       that.artist = res.tags.artist
    //     },
    //     onError: (error) => {
    //       console.log('Error');
    //       console.log(error);
    //     }
    // });

    console.log(this.$router)

  },
  computed: {
    process() {
      return this.currentTime / this.duration * 100
    },
    durationDisplay() {
      if (!this.ready) {
        return ''
      }
      let total = parseInt(this.duration)
      let mm = `${parseInt(total/60)}`
      if (mm.length == 1) {
        mm = `0${mm}`
      }
      let ss = `${parseInt(total%60)}`
      if (ss.length == 1) {
        ss = `0${ss}`
      }
      return `${mm}:${ss}`
    },
    currentDisplay() {
      if (!this.ready) {
        return ''
      }
      let total = parseInt(this.currentTime)
      let mm = `${parseInt(total/60)}`
      if (mm.length == 1) {
        mm = `0${mm}`
      }
      let ss = `${parseInt(total%60)}`
      if (ss.length == 1) {
        ss = `0${ss}`
      }
      return `${mm}:${ss}`
    },
  },
  methods: {
    toggle() {
      const node = this.$refs.audio
      if (node.paused) {
        node.play()
        this.pause = false
      }
      else {
        node.pause()
        this.pause = true
      }
      console.log([this.$refs.audio.paused])
    }
  }
}
</script>

<style scoped>
.index-root {
  position: relative;
  background-color: #fafafa;
  min-height: 100vh;
  color: #8b8b8b;
  font-size: 12px;
}
.footer-bar {
  padding: 0 5px;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  display: flex;
  align-items: center;
}
.process {
  flex-basis: 0;
  flex-grow: 1;
  height: 5px;
  border-radius: 5px;
  width: 200px;
  background-color: #ffdfdf;
  display: flex;
  margin: 0 10px;
  align-items: center;
}
.process-inner {
  height: 100%;
  border-radius: 3px;
  background-color: #ffadad;
  transition: all 200ms;
}
.process-handle {
  height: 10px;
  width: 10px;
  border-radius: 10px;
  background-color: #f48080;
  margin-left: -5px;
}

.toggle {
  height: 32px;
  width: 32px;
  margin: 0 8px;
}
.meta-title {
  color: #000;
  font-size: 14px;
}

.disc {
  height: 32px;
  width: 32px;
  margin: 0 8px;

}
.disc-play {
  animation: play 5s infinite linear;
}
.text {
  color: #f48080;
}

@keyframes play
{
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
</style>
